<template>
  <div class="lg:gap-10 flex flex-col gap-5 mx-auto max-w-7xl">
    <!-- 面包屑 -->
    <!-- 面包屑 -->
    <!-- 面包屑 -->
    <div class="lg:px-0 flex gap-2 justify-between items-center px-4 py-4 w-full">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="flex items-center">
        <el-breadcrumb-item class="flex items-center" :to="{ path: localePath('/') }">
          <div class="flex items-center">
            <i class="el-icon-s-home mr-1 text-lg"></i>
          </div>
        </el-breadcrumb-item>
        <!-- { path: localePath('/cards') } -->
        <el-breadcrumb-item class="flex items-center whitespace-nowrap" :to="func(goodsDetail?.category.length && goodsDetail?.category[0])">
          {{ goodsDetail?.category.length && goodsDetail?.category[0].name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item class="capitalize">
          {{ detailInfo?.goods_name || '' }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <!-- <div class="lg:hidden flex-none">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="size-5 cursor-pointer"
          @click="showDialog = true"
        >
          <path
            fill-rule="evenodd"
            d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
            clip-rule="evenodd"
          />
        </svg>
      </div> -->
    </div>
    <div class="lg:grid-cols-3 lg:px-0 lg:gap-20 grid grid-cols-1 gap-6 px-4">
      <!-- 左边 -->
      <!-- 左边 -->
      <!-- 左边 -->
      <div class="lg:col-span-3 lg:gap-12 flex flex-col col-span-1 gap-6">
        <!-- 主图 -->
        <div class="relative">
          <div class="w-full lg:aspect-[74/15] max-lg:h-[11.31rem] lg:pt-8 pt-4 relative">
            <div class="overflow-hidden lg:pt-10 pt-4 rounded-[1.13rem] h-full z-10 bg-cover border">
              <div
                style="transform: scale(2)"
                class="h-full bg-cover blur-2xl"
                :style="'background: url(' + $globalFn.imgPrefixUrl(detailInfo.image) + ')'"
              ></div>
            </div>
            <div class="size-full lg:pt-8 absolute inset-0 z-20 pt-4">
              <img
                src="https://cd.sealmg.com/assets/img/touming.png"
                class="size-full object-cover"
                alt="https://cd.sealmg.com/assets/img/touming.png"
                loading="lazy"
              />
            </div>
            <div class="size-full lg:pt-12 absolute inset-0 z-40 pt-4">
              <div class="lg:pt-8 size-full pt-4">
                <div class="size-full bg-black/20 backdrop-blur-md rounded-[1.13rem]"></div>
              </div>
            </div>
          </div>
          <div class="size-full lg:gap-6 lg:px-8 lg:pb-8 flex absolute top-0 left-0 z-50 gap-4 px-4 pb-4">
            <div
              v-if="detailInfo.type == 1"
              class="h-full aspect-[9/12] flex-none overflow-hidden shadow-[0rem_0.25rem_0.5rem_0rem_rgba(0,0,0,0.2)] rounded-[1rem] border border-white/30 border-solid"
            >
              <img
                class="size-full object-cover"
                v-if="detailInfo.image"
                :src="$globalFn.imgPrefixUrl(detailInfo.image || '', 'goods_thumb_3_4')"
                title="Product thumbnail"
                alt="Product image preview"
                loading="lazy"
              />
            </div>
            <div class="h-full aspect-[9/12] flex-none flex flex-col justify-end" v-if="detailInfo.type == 2">
              <div
                class="shadow-[0rem_0.25rem_0.5rem_0rem_rgba(0,0,0,0.2)] aspect-square rounded-[1rem] border overflow-hidden border-white/30 border-solid"
              >
                <img
                  class="size-full object-cover"
                  v-if="detailInfo.image"
                  :src="$globalFn.imgPrefixUrl(detailInfo.image || '', 'goods_thumb_1_1')"
                  title="Product thumbnail"
                  alt="Product image preview"
                  loading="lazy"
                />
              </div>
            </div>

            <div class="xl:gap-4 lg:gap-2 flex flex-col gap-2 justify-end w-full">
              <h1 class="font-semibold text-[0.94rem] lg:text-[1.25rem] text-white line-clamp-2">
                {{ detailInfo?.goods_name || '' }}
              </h1>
              <div class="text-[0.75rem] text-[rgba(255,255,255,0.7)]">
                {{ detailInfo?.region?.name || '' }}
              </div>
              <div class="flex justify-between items-center">
                <div class="text-[0.75rem] text-[rgba(255,255,255,0.7)]">
                  {{ $t('formItem.sale') }}
                  {{ detailInfo.sales_actual >= 10000 ? (detailInfo.sales_actual / 10000).toFixed(2) + 'w' : detailInfo.sales_actual }}
                </div>
                <div
                  @click="collectFn"
                  class="lg:size-[2.5rem] size-[2rem] cursor-pointer active:scale-90 duration-300 rounded-full flex items-center justify-center"
                >
                  <img
                    loading="lazy"
                    class="size-full object-cover transition-transform duration-300"
                    :src="`https://cd.sealmg.com/assets/img/collect2-${detailInfo.is_collect ? 'has' : 'no'}.png`"
                    :alt="detailInfo.is_collect ? 'Remove from collection' : 'Add to collection'"
                    :title="detailInfo.is_collect ? 'Remove from collection' : 'Add to collection'"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lg:grid-cols-3 lg:px-0 lg:gap-20 lg:grid hidden grid-cols-1 gap-6 px-4">
      <!-- 左边 -->
      <!-- 左边 -->
      <!-- 左边 -->
      <div class="lg:col-span-2 lg:gap-12 flex flex-col col-span-1 gap-6">
        <!-- 点卡选项 -->
        <!-- 点卡选项 -->
        <!-- 点卡选项 -->
        <div class="lg:flex hidden flex-col gap-4" v-if="detailInfo.sku.length">
          <h2 class="font-medium text-[1.25rem] text-[#121212] capitalize">
            {{ $t('pages.cardOptions') }}
          </h2>
          <div class="grid grid-cols-2 gap-4">
            <div
              class="rounded-[1rem] flex p-4 gap-4 relative items-center cursor-pointer border"
              v-for="item in detailInfo.sku"
              :key="item.id"
              :class="[
                item.stock_num <= 0 ? 'disabled' : '',
                curSku.id == item.id ? 'border-[#FF4E33] bg-[#FFF4F0]' : 'border-transparent bg-[#FAF9F9]'
              ]"
              @click="changeSku(item)"
            >
              <!-- 无货 -->
              <div
                v-if="item.stock_num == 0 && item.pre_sale != 1"
                class="top-2 right-2 absolute px-2 py-[.125rem] flex items-center justify-center !bg-[#D1D5DB] rounded-[0rem_0.38rem_0rem_0.38rem]"
              >
                <span class="font-medium text-[0.75rem] text-white">
                  {{ $t('pages.outofstock') }}
                </span>
              </div>
              <!-- 预售 -->
              <div
                v-if="item.stock_num == 0 && item.pre_sale"
                class="top-2 right-2 absolute px-2 py-[.125rem] flex items-center justify-center !bg-[#FF4E33] rounded-[0rem_0.38rem_0rem_0.38rem]"
              >
                <span class="font-medium text-[0.75rem] text-white">
                  {{ $t('pages.presale') }}
                </span>
              </div>
              <div class="size-[5rem] bgg">
                <div class="size-[4.5rem] rounded-[0.88rem] border overflow-hidden shadow-[0rem_0.13rem_0.25rem_0rem_rgba(3,7,18,0.2)]">
                  <img
                    :src="$globalFn.imgPrefixUrl(item.image || detailInfo.image, 'goods_thumb_1_1')"
                    loading="lazy"
                    :alt="item.title"
                    :title="item.title"
                    class="size-full object-cover"
                  />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <h3 class="font-medium text-[0.81rem] text-[#121212] line-clamp-2">
                  {{ item.title }}
                </h3>
                <p v-if="item.stock_num == 0 && item.pre_sale"></p>
                <p v-else class="font-medium text-[0.75rem] text-[#666666]">
                  {{ item.stock_num <= 0 ? $t('formItem.outStock') : '' }}
                </p>
                <div class="flex gap-2 items-center">
                  <span
                    class="font-bold text-[0.75rem] text-[#999999] line-through"
                    v-if="item.line_price_text > 0 && Number(item.price_text) < Number(item.line_price_text)"
                  >
                    {{ (detailInfo.currency && detailInfo.currency.currency_symbol) || '' }}{{ item.line_price_text }}
                  </span>
                  <div class="font-bold text-[1rem] flex items-center gap-1 text-[#FF4E33]">
                    <span>
                      {{ (detailInfo.currency && detailInfo.currency.currency_symbol) || '' }}
                    </span>
                    <span>
                      {{ item.price_text }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <!-- 右边 -->
      <!-- 右边 -->
      <div class="lg:gap-12 h-fit flex sticky top-[7rem] flex-col col-span-1 gap-6">
        <!-- {{ detailInfo }} -->
        <!-- 订单信息 -->
        <!-- 订单信息 -->
        <!-- 订单信息 -->
        <div class="lg:flex hidden flex-col gap-5">
          <h2 class="font-medium text-[1.25rem] text-[#121212] capitalize">{{ $t('orderPage.orderInfo') }}</h2>
          <div class="overflow-hidden rounded-[1rem] bg-[#FAF9F9] p-4">
            <template v-if="goodsDetail.type == 1">
              <!-- 无货 -->
              <!-- 无货 -->
              <!-- 无货 -->
              <template v-if="curSku.stock_num == 0 && curSku.pre_sale != 1">
                <div class="flex flex-col gap-5">
                  <template v-if="!curSku.is_subscription">
                    <div class="p-4 bg-[#FAF9F9] flex flex-col gap-2">
                      <p class="font-medium text-[1.25rem] text-[#121212] text-center">
                        {{ $t('pages.outOfStock') }}
                      </p>
                      <p class="font-medium text-[0.88rem] text-[#999999] text-center">
                        {{ $t('pages.outOfStockDesc') }}
                      </p>
                    </div>
                  </template>
                  <template v-else>
                    <div class="p-4 bg-[#FAF9F9] flex flex-col gap-2">
                      <div class="flex justify-center">
                        <img
                          src="https://cd.sealmg.com/assets/img/success.png"
                          alt="pleaseReadSuccessfully"
                          class="size-[3.5rem] object-cover"
                          loading="lazy"
                        />
                      </div>
                      <p class="font-medium text-[0.88rem] text-[#999999] text-center">
                        We will send you notification when this product is back in stock.
                      </p>
                    </div>
                  </template>
                  <div
                    v-if="!curSku.is_subscription"
                    @click="!curSku.is_subscription ? notice() : ''"
                    :class="!curSku.is_subscription ? '' : 'grayscale'"
                    class="h-[3.13rem] bg-[#FFF4F0] rounded-[1.56rem] cursor-pointer active:scale-90 duration-300 text-[#FF4E33] flex items-center gap-2 justify-center"
                  >
                    <i class="el-icon-message-solid"></i>
                    <span class="font-medium text-[1rem] text-[#FF4E33]">
                      {{ $t('pages.notify') }}
                    </span>
                  </div>
                </div>
              </template>
              <!-- 有货/ 预售 -->
              <!-- 有货/ 预售 -->
              <!-- 有货/ 预售 -->
              <div class="flex flex-col gap-5" v-else>
                <div class="flex justify-between py-4">
                  <div class="font-medium text-[0.88rem] text-[#666666] capitalize">
                    {{ $t('formItem.productNum') }}
                  </div>
                  <!-- {{ curSku.stock_num }} -->
                  <!-- {{ curSku.stock_num >= 20 ? 20 : curSku.stock_num }} -->
                  <!-- :disabled="!curSku.id" -->
                  <LazyInputNumber
                    :inputVal="num"
                    :disabled="!curSku.id"
                    :max="curSku.stock_num >= 20 ? 20 : curSku.stock_num"
                    @handleChange="handleChangeRes"
                  />
                </div>
                <div class="flex justify-between py-4" v-if="curSku.stock_num == 0 && curSku.pre_sale">
                  <div class="font-medium text-[0.88rem] text-[#666666] capitalize">
                    {{ $t('pages.presale') }}
                  </div>
                  <div class="font-medium text-[0.88rem] text-[#FF4E33]">
                    {{ initData.pre_delivery_day || '' }}
                  </div>
                </div>
                <div class="flex justify-between py-4">
                  <div class="font-medium text-[0.88rem] text-[#666666] capitalize">
                    {{ $t('formItem.goodsTotalPrice') }}
                  </div>
                  <div class="font-bold text-[1.5rem] text-[#FF4E33]">
                    {{ (detailInfo.currency && detailInfo.currency.currency_symbol) || '' }}
                    {{ totalPrice.toFixed(2) }}
                  </div>
                </div>
                <div
                  v-if="curSku && (curSku.stock_num > 0 || curSku.pre_sale == 1)"
                  class="grid grid-cols-3 gap-4 h-12 transition-all duration-300 ease-in-out select-none"
                >
                  <div
                    @click="addShopCar"
                    v-if="goodsDetail.type == 1"
                    class="col-span-1 bg-[#FFEBE2] cursor-pointer active:scale-90 duration-300 rounded-[1.5rem] flex justify-center items-center"
                  >
                    <img loading="lazy" class="size-[1.5rem]" src="https://cd.sealmg.com/assets/img/shop-car-icon2.png" alt="shop-car-icon2" />
                  </div>
                  <div
                    @click="submitOrder"
                    :class="goodsDetail.type !== 1 ? 'col-span-3' : 'col-span-2'"
                    class="bg-[#FF4E33] cursor-pointer active:scale-90 duration-300 rounded-[1.5rem] flex justify-center items-center capitalize"
                  >
                    <span class="font-medium text-[1rem] text-white">
                      {{ $t('formBtn.buy') }}
                    </span>
                  </div>
                </div>
              </div>
            </template>
            <template v-if="goodsDetail.type == 2">
              <div class="flex flex-col">
                <CreateForm v-model="goodsDetail.ext" :value.sync="modelValue" @select-change="selectchange"> </CreateForm>
                <div class="flex justify-between py-4">
                  <div class="font-medium text-[0.88rem] text-[#666666] capitalize">
                    {{ $t('formItem.goodsTotalPrice') }}
                  </div>
                  <div class="font-bold text-[1.5rem] text-[#FF4E33]">
                    {{ (detailInfo.currency && detailInfo.currency.currency_symbol) || '' }}
                    {{ totalPrice.toFixed(2) }}
                  </div>
                </div>
                <div
                  class="grid grid-cols-3 gap-4 h-12 transition-all duration-300 select-none"
                  v-if="curSku && (curSku.stock_num > 0 || curSku.pre_sale == 1)"
                >
                  <div
                    @click="addShopCar"
                    v-if="goodsDetail.type == 1"
                    class="col-span-1 bg-[#FFF4F0] cursor-pointer active:scale-90 duration-300 rounded-[1.5rem] flex justify-center items-center"
                  >
                    <img loading="lazy" class="size-[1.5rem]" src="https://cd.sealmg.com/assets/img/shop-car-icon2.png" alt="shop-car-icon2" />
                  </div>
                  <div
                    @click="submitOrder"
                    :class="goodsDetail.type !== 1 ? 'col-span-3' : 'col-span-2'"
                    class="bg-[#FF4E33] cursor-pointer active:scale-90 duration-300 rounded-[1.5rem] flex justify-center items-center capitalize"
                  >
                    <span class="font-medium text-[1rem] text-white">
                      {{ $t('formBtn.buy') }}
                    </span>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="lg:grid-cols-3 lg:px-0 lg:gap-20 grid grid-cols-1 gap-6 px-4">
      <!-- 左边 -->
      <!-- 左边 -->
      <!-- 左边 -->
      <div class="lg:col-span-2 lg:gap-12 flex flex-col col-span-1 gap-6">
        <!-- h5 选项 -->
        <div class="max-lg:flex hidden flex-col gap-4">
          <!--选项 -->
          <div @click="showDialog = !showDialog" class="h-[3rem] bg-[#FAF9F9] flex cursor-pointer rounded-[0.5rem] justify-between p-3 items-center">
            <div class="flex gap-2 items-center">
              <div class="w-[2.25rem] h-[2.25rem] overflow-hidden rounded-[0.5rem] flex-none">
                <img :src="$globalFn.imgPrefixUrl(curSku.image)" loading="lazy" :alt="curSku.title" class="size-full object-cover" />
              </div>
              <div class="font-medium text-[0.81rem] text-[#121212] line-clamp-1">
                {{ curSku.title || $t('status.notSelected') }}
              </div>
            </div>
            <div class="overflow-hidden flex-none bg-white rounded-md">
              <img src="https://cd.sealmg.com/assets/img/arrow-more-icon.png" :alt="curSku.title" :title="curSku.title" class="size-[1.5rem]" />
            </div>
          </div>
          <!-- 游戏 和  点卡 -->
          <template v-if="goodsDetail.type == 1">
            <!-- H5无货 价格和输入框-->
            <!-- H5无货 价格和输入框-->
            <!-- H5无货 价格和输入框-->
            <template v-if="curSku.stock_num == 0 && curSku.pre_sale != 1">
              <div class="flex flex-col gap-4">
                <template v-if="!curSku.is_subscription">
                  <div class="p-4 bg-[#FAF9F9] flex flex-col gap-2 rounded-[0.5rem]">
                    <p class="font-medium text-[1.25rem] text-[#121212] text-center">
                      {{ $t('pages.outOfStock') }}
                    </p>
                    <p class="font-medium text-[0.88rem] text-[#999999] text-center">
                      {{ $t('pages.outOfStockDesc') }}
                    </p>
                  </div>
                </template>
                <template v-else>
                  <div class="p-4 bg-[#FAF9F9] flex flex-col gap-2 rounded-[0.5rem]">
                    <div class="flex justify-center">
                      <img
                        src="https://cd.sealmg.com/assets/img/success.png"
                        alt="pleaseReadSuccessfully"
                        class="size-[3.5rem] object-cover"
                        loading="lazy"
                      />
                    </div>
                    <p class="font-medium text-[0.88rem] text-[#999999] text-center">
                      We will send you notification when this product is back in stock.
                    </p>
                  </div>
                </template>
              </div>
            </template>
            <!-- H5有货  价格和输入框-->
            <!-- H5有货  价格和输入框-->
            <!-- H5有货  价格和输入框-->
            <template v-else>
              <div class="flex flex-col">
                <div class="flex justify-between py-4">
                  <div class="font-medium text-[0.75rem] lg:text-[0.88rem] text-[#666666]">
                    {{ $t('formItem.productNum') }}
                  </div>
                  <LazyInputNumber
                    :inputVal="num"
                    :disabled="!curSku.id"
                    :max="curSku.stock_num >= 20 ? 20 : curSku.stock_num"
                    @handleChange="handleChangeRes"
                  />
                </div>
                <!-- <div
                class="flex justify-between py-4"
                v-if="curSku.stock_num == 0 && curSku.pre_sale"
              >
                <div
                  class="font-medium text-[0.88rem] text-[#666666] capitalize"
                >
                  {{ $t("pages.presale") }}
                </div>
                <div class="font-medium text-[0.88rem] text-[#FF4E33]">
                  {{ initData.pre_delivery_day || "" }}
                </div>
              </div> -->
                <div class="flex justify-between py-4" v-if="curSku.stock_num == 0 && curSku.pre_sale">
                  <div class="font-medium text-[0.75rem] lg:text-[0.88rem] text-[#666666]">
                    {{ $t('pages.presale') }}
                  </div>
                  <div class="font-medium text-[0.75rem] lg:text-[0.88rem] text-[#FF4E33]">
                    {{ initData.pre_delivery_day || '' }}
                  </div>
                </div>
                <div class="flex justify-between py-4">
                  <div class="font-medium text-[0.75rem] lg:text-[0.88rem] text-[#666666]">
                    {{ $t('formItem.goodsTotalPrice') }}
                  </div>
                  <div class="font-bold lg:text-[1.5rem] text-[1rem] text-[#FF4E33]">
                    {{ (detailInfo.currency && detailInfo.currency.currency_symbol) || '' }}
                    {{ totalPrice.toFixed(2) }}
                  </div>
                </div>
              </div>
            </template>
          </template>
          <!-- 直冲 -->
          <template v-if="goodsDetail.type == 2">
            <!-- 表单 -->
            <CreateForm v-model="goodsDetail.ext" :value.sync="modelValue" @select-change="selectchange"> </CreateForm>
            <!-- 总价 -->
            <div class="flex justify-between py-4">
              <div class="font-medium text-[0.75rem] lg:text-[0.88rem] text-[#666666]">
                {{ $t('formItem.goodsTotalPrice') }}
              </div>
              <div class="font-bold lg:text-[1.5rem] text-[1rem] text-[#FF4E33]">
                {{ (detailInfo.currency && detailInfo.currency.currency_symbol) || '' }}
                {{ totalPrice.toFixed(2) }}
              </div>
            </div>
          </template>
        </div>
        <!-- 商品信息 -->
        <!-- 商品信息 -->
        <!-- 商品信息 -->
        <div class="flex flex-col gap-4">
          <!-- 描述 -->
          <!-- 描述 -->
          <h2 class="font-medium text-[1.25rem] text-[#121212]">
            {{ $t('orderPage.goodsInfo') }}
          </h2>
          <div class="flex flex-col gap-2">
            <!-- <h3 class="font-medium text-[0.88rem] text-[#666666]">
              {{ $t("pages.describe") }}
            </h3> -->
            <div class="w-full border-t"></div>
          </div>
          <div class="simditor">
            <div class="simditor-body">
              <p v-html="centerImagesInContent(detailInfo?.content || '')"></p>
            </div>
          </div>
          <!-- 指南 -->
          <!-- 指南 -->
          <template v-if="detailInfo.store_tips">
            <h2 class="font-medium text-[1.25rem] text-[#121212]">
              {{ $t('pages.guide') }}
            </h2>
            <div class="flex flex-col gap-2">
              <!-- <h3 class="font-medium text-[0.88rem] text-[#666666]">
              {{ $t("pages.describe") }}
            </h3> -->
              <div class="w-full border-t"></div>
            </div>
            <div class="simditor">
              <div class="simditor-body overflow-hidden">
                <div v-html="centerImagesInContent(detailInfo.store_tips)"></div>
              </div>
            </div>
          </template>
        </div>
        <!-- 评分&评价 -->
        <!-- 评分&评价 -->
        <!-- 评分&评价 -->
        <div class="flex flex-col gap-6">
          <div class="flex justify-between items-center" v-if="scoreInfo">
            <h2 class="font-medium text-[1.25rem] text-[#121212] capitalize line-clamp-1">
              {{ $t('orderPage.ratingEvaluation') }}
            </h2>
            <NuxtLink
              :to="goCommentInfo()"
              class="px-3 py-1 rounded-[1.06rem] border border-[#FF4E33] border-solid cursor-pointer active:scale-90 duration-300 select-none"
            >
              <span class="text-sm text-[#FF4E33] capitalize">{{ $t('formBtn.viewAll') }}</span>
            </NuxtLink>
          </div>
          <div class="flex flex-col gap-2">
            <div class="font-medium text-[0.88rem] text-[#666666]">
              {{ $t('orderPage.overallRating') }}
            </div>
            <div class="w-full border-t"></div>
          </div>
          <!-- 评价 -->
          <Score v-if="scoreInfo.avg && scoreInfo.scores" :detailInfo="scoreInfo" :totalScore="totalScore" />
          <template v-if="evaluateList.length">
            <div class="flex flex-col gap-2">
              <div class="font-medium text-[0.88rem] text-[#666666]">
                {{ $t('orderPage.evaluate') }}
              </div>
              <div class="w-full border-t"></div>
            </div>
            <!-- 评论列表 -->
            <LazyEvaluate :dataList="evaluateList" />
          </template>
        </div>
        <LazyH5share type="1"></LazyH5share>
      </div>
      <!-- 右边 -->
      <!-- 右边 -->
      <!-- 右边 -->
      <div class="lg:gap-12 flex flex-col col-span-1 gap-6 sticky top-[7rem] h-fit">
        <!-- 相关点卡 -->
        <!-- 相关点卡 -->
        <!-- 相关点卡 -->
        <div class="lg:gap-5 flex flex-col gap-3">
          <h2 class="font-medium text-[1.25rem] text-[#121212] capitalize" v-if="detailInfo?.card.length">
            {{ $t('pages.relatedCards') }}
          </h2>
          <NuxtLink class="flex gap-4 items-center cursor-pointer" v-for="item in detailInfo.card" :key="item.id" :to="otheCard(item)">
            <div class="size-[3.5rem] rounded-[0.63rem] border-[0.03rem] overflow-hidden border-solid border-[#E6E6E6] flex-none">
              <img
                loading="lazy"
                class="size-full group-hover:scale-125 object-cover duration-300"
                :src="$globalFn.imgPrefixUrl(item.image, 'goods_thumb_1_1')"
                :title="`${item.goods_name}`"
                :alt="`${item.goods_name}`"
                srcset=""
              />
            </div>
            <div class="flex flex-col">
              <div class="flex gap-2 items-center">
                <span class="font-medium text-[0.88rem] text-[#121212] line-clamp-1">
                  {{ item.goods_name || '' }}
                </span>
                <img
                  src="https://cd.sealmg.com/assets/img/discountLabel.png"
                  class="size-4"
                  alt="discountLabel"
                  title="discountLabel"
                  v-if="item.max_discount > 0"
                />
              </div>
              <!-- discountLabel -->
              <div class="font-medium text-[0.75rem] text-[#999999] flex items-center gap-2">
                <span>{{ item?.region?.name || '' }}</span>
                <span v-if="item.sku && item.sku.length && item.sku[0].discount"> -{{ item.sku[0].discount || 0 }}% </span>
              </div>
            </div>
          </NuxtLink>
          <h2 class="font-medium text-[1.25rem] text-[#121212] capitalize" v-if="recommendedlist.length">
            {{ $t('pages.hotCard') }}
          </h2>
          <NuxtLink class="flex gap-4 items-center cursor-pointer" v-for="item in recommendedlist" :key="item.id" :to="otheCard(item)">
            <div class="size-[3.5rem] flex-none rounded-[0.63rem] border-[0.03rem] overflow-hidden border-solid border-[#E6E6E6]">
              <img
                loading="lazy"
                class="size-full group-hover:scale-125 object-cover duration-300"
                :src="$globalFn.imgPrefixUrl(item.image, 'goods_thumb_1_1')"
                :title="`${item.goods_name}`"
                :alt="`${item.goods_name}`"
                srcset=""
              />
            </div>
            <div class="flex flex-col">
              <div class="flex gap-2 items-center">
                <span class="font-medium text-[0.88rem] text-[#121212] line-clamp-1">
                  {{ item.goods_name || '' }}
                </span>
                <img
                  src="https://cd.sealmg.com/assets/img/discountLabel.png"
                  class="size-4"
                  alt="discountLabel"
                  title="discountLabel"
                  v-if="item.max_discount > 0"
                />
              </div>
              <!-- discountLabel -->
              <div class="font-medium text-[0.75rem] text-[#999999] flex items-center gap-2">
                <span>{{ item?.region?.name || '' }}</span>
                <span v-if="item.sku && item.sku.length && item.sku[0].discount"> -{{ item.sku[0].discount || 0 }}% </span>
              </div>
            </div>
          </NuxtLink>
        </div>
      </div>
    </div>
    <div></div>
    <!-- H5无货 按钮-->
    <!-- H5无货 按钮-->
    <!-- H5无货 按钮-->
    <LazyH5footer v-if="curSku.stock_num == 0 && curSku.pre_sale != 1">
      <div class="grid grid-cols-3 gap-4 w-full select-none">
        <div
          @click="!curSku.is_subscription ? notice() : ''"
          :class="!curSku.is_subscription ? '' : 'grayscale'"
          class="col-span-3 py-3 bg-[#FFF4F0] cursor-pointer active:scale-90 duration-300 rounded-[1.5rem] flex justify-center items-center text-[#FF4E33] gap-2 capitalize"
        >
          <i class="el-icon-message-solid"></i>
          <span class="font-medium text-[1rem] text-[#FF4E33]">
            {{ $t('pages.notify') }}
          </span>
        </div>
      </div>
    </LazyH5footer>
    <!--H5预售/有货 按钮 -->
    <!--H5预售/有货 按钮 -->
    <!--H5预售/有货 按钮 -->
    <LazyH5footer v-else>
      <div class="grid grid-cols-3 gap-4 w-full select-none">
        <div
          v-if="goodsDetail.type == 1"
          @click="addShopCar"
          class="col-span-1 py-3 bg-[#FFEBE2] cursor-pointer active:scale-90 duration-300 rounded-[1.5rem] flex justify-center items-center"
        >
          <img loading="lazy" class="size-[1.5rem]" src="https://cd.sealmg.com/assets/img/shop-car-icon2.png" alt="shop-car-icon2" />
        </div>
        <div
          @click="submitOrder"
          :class="goodsDetail.type !== 1 ? 'col-span-3' : 'col-span-2'"
          class="col-span-2 py-3 bg-[#FF4E33] cursor-pointer active:scale-90 duration-300 rounded-[1.5rem] flex justify-center items-center capitalize"
        >
          <span class="font-medium lg:text-[1rem] text-[0.88rem] text-white">
            {{ $t('formBtn.buy') }}
          </span>
        </div>
      </div>
    </LazyH5footer>
    <LazyH5Dialog :showDialog="showDialog" :title="$t('pages.cardOptions')">
      <div class="flex flex-col gap-4 py-4">
        <!-- <h2 class="font-medium text-[1.25rem] text-[#121212]">
          {{ $t("pages.cardOptions") }}
        </h2> -->
        <div
          class="rounded-[1rem] flex lg:p-4 p-3 gap-4 relative items-center justify-between cursor-pointer border"
          v-for="item in detailInfo.sku"
          :key="item.id"
          :class="[
            item.stock_num <= 0 ? 'disabled' : '',
            curSku.id == item.id ? 'border-[#FF4E33] bg-[#FFF4F0]' : 'border-transparent bg-[#FAF9F9] '
          ]"
          @click="changeSku(item)"
        >
          <div class="flex gap-4 items-center">
            <div class="size-[4rem] bgg">
              <div class="size-[3.5rem] rounded-[0.88rem] border overflow-hidden shadow-[0rem_0.13rem_0.25rem_0rem_rgba(3,7,18,0.2)]">
                <img :src="$globalFn.imgPrefixUrl(item.image)" loading="lazy" :alt="item.title" class="size-full object-cover" />
              </div>
            </div>
            <div class="flex flex-col justify-between">
              <p class="font-medium text-[0.81rem] text-[#121212] line-clamp-2 pl-[]">
                {{ item.title }}
              </p>
              <p class="font-medium text-[0.75rem] text-[#666666]">
                {{ item.stock_num <= 0 ? $t('formItem.outStock') : '' }}
              </p>
              <div class="flex gap-2 items-center">
                <span
                  class="font-bold text-[0.75rem] text-[#999999]"
                  v-if="item.line_price_text > 0 && Number(item.price_text) < Number(item.line_price_text)"
                >
                  {{ (detailInfo.currency && detailInfo.currency.currency_symbol) || '' }}{{ item.line_price_text }}
                </span>
                <span class="font-bold text-[1rem] text-[#FF4E33]">
                  {{ (detailInfo.currency && detailInfo.currency.currency_symbol) || '' }}{{ item.price_text }}
                </span>
              </div>
            </div>
          </div>
          <div>
            <div class="text-transparent whitespace-nowrap" v-if="item.stock_num == 0 && item.pre_sale != 1">
              {{ $t('pages.outofstock') }}
            </div>
            <div class="text-transparent whitespace-nowrap" v-if="item.stock_num == 0 && item.pre_sale">
              {{ $t('pages.presale') }}
            </div>
            <div
              v-if="item.stock_num == 0 && item.pre_sale != 1"
              class="top-2 right-2 absolute px-2 py-[.125rem] flex items-center justify-center bg-[#D1D5DB] rounded-[0rem_0.38rem_0rem_0.38rem]"
            >
              <span class="font-medium text-[0.75rem] text-white">
                {{ $t('pages.outofstock') }}
              </span>
            </div>
            <div
              v-if="item.stock_num == 0 && item.pre_sale"
              class="top-2 right-2 absolute px-2 py-[.125rem] flex items-center justify-center bg-[#FF4E33] rounded-[0rem_0.38rem_0rem_0.38rem]"
            >
              <span class="font-medium text-[0.75rem] text-white">
                {{ $t('pages.presale') }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </LazyH5Dialog>
  </div>
</template>
<script>
  import { throttle, debounce } from '@/static/js/common'
  export default {
    name: 'CardDetails',
    layout: 'newsHome',

    head() {
      return {
        title: this.goodsDetail.seo_title,
        meta: [
          {
            hide: 'description',
            name: 'description',
            content: this.goodsDetail.seo_description
          }
        ]
      }
    },
    data: function () {
      return {
        loading: true, // 页面加载状态
        btnLoading: false, // 按钮加载状态
        detailInfo: {}, // 商品详细信息
        num: 1, // 商品购买数量
        totalPrice: 0, // 商品总价
        curSku: {}, // 当前选中的SKU信息
        scoreInfo: {}, // 评分信息
        evaluateList: [], // 评价列表
        goodsDetail: null, // 商品原始数据
        showDialog: false, // H5商品选项弹窗状态
        recommendedlist: [], // 推荐商品列表
        modelValue: {}, // 表单数据
        code: '' // 商品code
      }
    },
    computed: {
      // 获取初始化数据
      initData() {
        return this.$store.state.initData.initData || {}
      }
    },
    created() {
      this.getGoodsDetails()
      // this.getGoodsDetail();
    },
    // type: 1 点卡  2 充值卡
    async asyncData({ app: { $axios }, params, error, redirect }) {
      try {
        // 并行请求商品详情和推荐商品数据
        const [goodsDetail, recommendedGoods, evaluateList, scoreInfo] = await Promise.all([
          $axios.get('/api/goods/read', {
            params: { code: params.code }
          }),
          $axios.get('/api/goods/index', {
            params: {
              type: 1,
              is_home: 1,
              page: 1,
              limit: 10
            }
          }),
          $axios.get('/api/comment/index', {
            params: {
              code: params.code,
              page: 1,
              limit: 10
            }
          }),
          $axios.get('/api/comment/total', {
            params: {
              code: params.code
            }
          })
        ])
        //
        //
        //
        //
        return {
          goodsDetail: goodsDetail, // 商品详情数据
          recommendedlist: recommendedGoods, // 推荐商品数据
          code: params.code, // 商品code
          evaluateList, //  评价列表数据
          scoreInfo, // 评分信息数据
          totalScore: scoreInfo.scores.reduce((sum, item) => sum + item.count, 0), // 评分信息数据
          detailInfo: goodsDetail, // 商品详情数据
          loading: false // 页面加载状态
          // curSku: goodsDetail.sku && goodsDetail.sku[0], // 当前选中的SKU信息
          // totalPrice: goodsDetail.sku && goodsDetail?.sku[0]?.price_text - 0, // 商品总价
          // showsku: false, // 是否显示sku
          // showDialog: false, // H5商品选项弹窗状态
        }
      } catch (err) {
        error({
          statusCode: err.code || 404,
          message: err.msg || '数据加载失败'
        })
      }
    },
    methods: {
      selectchange(e) {},
      func(e) {
        if (!e.type) {
          return { path: this.localePath('/game') }
        }
        if (e.type == 1) {
          if (e.type_2 == 1) {
            return { path: this.localePath(`/cards/${e.code}`) }
          } else {
            return { path: this.localePath(`/cards-category/${e.code}`) }
          }
        }
        if (e.type == 2) {
          if (e.type_2 == 1) {
            return { path: this.localePath(`/top-up/${e.code}`) }
          } else {
            return { path: this.localePath(`/top-up-category/${e.code}`) }
          }
        }
      },
      // 获取详情
      async getGoodsDetails() {
        const res = await this.$axios.get('/api/goods/read', {
          params: { code: this.code }
        })
        this.goodsDetail = res
        this.detailInfo = res
        this.getGoodsDetail()
      },
      // 处理富文本中的图片并使其居中显示
      centerImagesInContent(content) {
        const imgRegex = /<img[^>]*>/gi
        const centeredContent = content.replace(imgRegex, match => {
          if (match.toLowerCase().includes('style=')) {
            return match.replace(/style=["'][^"']*["']/i, styleMatch => {
              const newStyle = styleMatch.slice(0, -1) + ' display: block; margin: 0 auto;"'
              return newStyle
            })
          } else {
            const newImgTag = match.replace(/(>)/, ' style="display: block; margin: 0 auto;"$1')
            return newImgTag
          }
        })
        return centeredContent
      },
      // 订阅商品库存通知
      async notice() {
        try {
          await this.$axios.post('/api/goods/subscription', {
            goods_id: this.goodsDetail.id,
            sku_id: this.curSku.id
          })
          this.refresh()
        } catch (err) {
          console.error('订阅失败:', err)
        }
      },
      // 刷新商品详情数据
      async refresh() {
        try {
          const result = await this.$axios.get(`/api/goods/read?code=${this.code}`)
          this.goodsDetail = result
          this.getGoodsDetail()
        } catch (err) {
          console.error('刷新商品详情失败:', err)
        }
      },
      // 获取商品详情信息
      getGoodsDetail() {
        // 设置默认SKU
        if (this.goodsDetail?.sku?.length) {
          this.changeSku(this.goodsDetail.sku[0])
        }
        this.loading = false
      },
      // 获取商品评价列表
      // async getEvaluateList() {
      //   const res = await this.$axios.get("/api/comment/index", {
      //     params: {
      //       id: this.detailInfo.id,
      //       page: 1,
      //       limit: 10,
      //     },
      //   });
      //   this.evaluateList = res || [];
      // },
      // 获取评价信息总览
      // async getEvaluateInfo() {
      //   const res = await this.$axios.get(
      //     `/api/comment/total?id=${this.detailInfo.id}`
      //   );
      //   if (res?.scores?.length) {
      //     // 计算总评分数
      //     this.totalScore = res.scores.reduce((sum, item) => sum + item.count, 0);
      //   }
      //   this.scoreInfo = res || {};
      //   // this.getEvaluateList();
      // },
      // 收藏/取消收藏商品
      collectFn() {
        const url = this.detailInfo.is_collect ? '/api/collect/cancel' : '/api/collect/add'
        this.$axios
          .post(
            url,
            { goods_id: this.detailInfo.id },
            {
              setConfig: {
                showSuccessMsg: !this.detailInfo.is_collect
              }
            }
          )
          .then(() => {
            this.detailInfo.is_collect = this.detailInfo.is_collect ? 0 : 1
            this.$store.dispatch('user/getUserInfo')
          })
      },
      // 切换商品SKU
      changeSku(item) {
        this.num = 1
        this.curSku = item
        this.totalPrice = item.price_text * this.num
        this.showsku = false
        this.showDialog = false
      },
      // 处理商品数量变化
      handleChangeRes(num) {
        this.num = num
        this.totalPrice = this.curSku.price_text * this.num
      },
      // 添加到购物车
      addShopCar: debounce(
        async function () {
          try {
            await this.$axios.post(
              '/api/cart/oper',
              {
                gid: this.curSku.id,
                gnum: this.num
              },
              {
                setConfig: { showSuccessMsg: true }
              }
            )
            this.$store.dispatch('user/getUserInfo')
          } catch (err) {
            console.error('添加购物车失败:', err)
          }
        },
        300,
        { leading: true, trailing: false }
      ),
      // 跳转到其他商品详情页
      otheCard(item) {
        return this.localePath(`/product/${item.code}`)
      },
      // 跳转到评论页面
      goCommentInfo() {
        return this.localePath(`/comment/${this.detailInfo.id}`)
      },
      // 提交订单
      // submitOrder: throttle(
      //   function () {
      //     let obj = { id: this.curSku.id, num: this.num, info: {} };
      //     if (this.detailInfo.ext && this.detailInfo.ext.length) {
      //       this.detailInfo.ext.map((item) => {
      //         obj.info[item.field] = item.value;
      //       });
      //     }
      //     this.btnLoading = true;
      //     this.$axios
      //       .post("/api/order/create", { goods: [obj] })
      //       .then((res) => {
      //         this.btnLoading = false;
      //         this.$router.push({
      //           path: this.localePath("/order/pay"),
      //           query: {
      //             no: res.order_no,
      //           },
      //         });
      //       })
      //       .catch((err) => {
      //         this.btnLoading = false;
      //       });
      //   },
      //   2000,
      //   {
      //     leading: true,
      //     trailing: false,
      //   }
      // ),
      // 跳转收银台页面
      // submitOrder() {
      //   // type: 1 点卡  2 充值卡
      //   // 判断是否登录
      //   if (!this.$store.state.user.userInfo) {
      //     this.$router.push({
      //       path: this.localePath('/login'),
      //       query: {
      //         redirect: this.$route.fullPath
      //       }
      //     })
      //     return
      //   } else {
      //     if (this.goodsDetail.type == 1) {
      //       // 构建订单对象
      //       const obj = [
      //         {
      //           id: this.curSku.id,
      //           num: this.num,
      //           info: {}
      //         }
      //       ]
      //       this.$router.push({
      //         path: this.localePath('/order/cashier'),
      //         query: {
      //           data: JSON.stringify(obj),
      //           type: 1
      //         }
      //       })
      //     } else {
      //       if (this.modelValue && Object.values(this.modelValue).some(v => !v)) {
      //         this.$message.error('请填写完整信息')
      //         return
      //       }
      //       // 构建订单对象
      //       const obj = [
      //         {
      //           id: this.curSku.id,
      //           num: this.num,
      //           info: this.modelValue
      //         }
      //       ]
      //       this.$router.push({
      //         path: this.localePath('/order/cashier'),
      //         query: {
      //           data: JSON.stringify(obj),
      //           type: 2
      //         }
      //       })
      //     }
      //   }
      // }
      async submitOrder() {
        try {
          // 检查用户登录状态
          if (!this.$store.state.user.userInfo.token) {
            await this.$router.push({
              path: this.localePath('/login'),
              query: { redirect: this.$route.fullPath }
            })
            return
          }

          this.btnLoading = true // 启用加载状态

          // 构建订单数据
          const orderData = {
            type: this.goodsDetail.type,
            data: JSON.stringify([
              {
                id: this.curSku.id,
                num: this.num,
                info: this.goodsDetail.type === 2 ? this.modelValue : {}
                // infos: this.goodsDetail.type === 2 ? this.modelValue : {}
              }
            ])
          }

          // 验证表单数据
          if (this.goodsDetail.type === 2 && this.modelValue && Object.values(this.modelValue).some(v => !v)) {
            this.$message.error(this.$t('pages.submitAfterComplete'))
            return
          }

          // 跳转到收银台
          await this.$router.push({
            path: this.localePath('/order/cashier'),
            query: orderData
          })
        } catch (error) {
          console.error('提交订单失败:', error)
          // this.$message.error('提交订单失败，请重试')
        } finally {
          this.btnLoading = false // 无论成功失败都关闭加载状态
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  // @import "~/assets/css/simditor.css";
  .bgg {
    background: linear-gradient(180deg, #faf9f9 50%, #fff 100%);
    border-radius: 0.88rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .disabled {
    //@apply grayscale;
  }
</style>
